<template>
  <div class="chart-settings">
    <a-form layout="vertical">
      <!-- 图表标题设置 -->
      <a-form-item label="标题">
        <a-input v-model:value="localOptions.title.text" placeholder="请输入图表标题" />
      </a-form-item>
      
      <a-form-item label="显示标题">
        <a-switch v-model:checked="localOptions.title.show" />
      </a-form-item>
      
      <!-- 通用提示 -->
      <a-alert
        type="info"
        show-icon
        :message="`${chartTypeLabel}高级设置`"
        :description="`此图表类型的特定设置正在开发中，您可以通过JSON编辑器直接修改配置。`"
        style="margin-bottom: 16px;"
      />
      
      <!-- JSON编辑器 -->
      <a-form-item label="JSON配置">
        <a-textarea
          v-model:value="jsonConfig"
          :auto-size="{ minRows: 10, maxRows: 20 }"
          placeholder="请输入JSON配置"
          @blur="updateFromJson"
        />
      </a-form-item>
      
      <a-form-item v-if="jsonError">
        <a-alert
          type="error"
          show-icon
          message="JSON格式错误"
          :description="jsonError"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  options: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update:options']);

// 本地存储options，用于编辑
const localOptions = ref<any>({
  title: {
    text: '',
    show: false
  }
});

// JSON编辑器的值
const jsonConfig = ref('');
const jsonError = ref('');

// 根据图表类型显示不同的标签
const chartTypeLabel = ref('图表');

// 更新JSON配置
const updateJson = () => {
  try {
    jsonConfig.value = JSON.stringify(localOptions.value, null, 2);
    jsonError.value = '';
  } catch (error) {
    jsonError.value = '无法将配置转换为JSON';
  }
};

// 从JSON更新配置
const updateFromJson = () => {
  try {
    const newOptions = JSON.parse(jsonConfig.value);
    localOptions.value = newOptions;
    jsonError.value = '';
    emitUpdate();
  } catch (error) {
    jsonError.value = '无效的JSON格式: ' + (error as Error).message;
  }
};

// 向父组件发送更新的options
const emitUpdate = () => {
  emit('update:options', localOptions.value);
};

// 初始化
onMounted(() => {
  // 深拷贝props的options
  if (props.options) {
    localOptions.value = JSON.parse(JSON.stringify(props.options));
    
    // 确保必要的属性存在
    if (!localOptions.value.title) {
      localOptions.value.title = { text: '', show: false };
    }
    
    // 更新JSON编辑器的值
    updateJson();
  }
});

// 监听props.options变化
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    localOptions.value = JSON.parse(JSON.stringify(newOptions));
    updateJson();
  }
}, { deep: true });

// 监听title变化直接更新
watch(() => localOptions.value.title, () => {
  emitUpdate();
  updateJson();
}, { deep: true });
</script>

<style scoped>
.chart-settings {
  padding: 10px;
}
</style> 